<template>
  <div>
    <el-drawer
      title="数据配置"
      :visible.sync="configVisible"
      direction="rtl"
      size="60%"
      :destroy-on-close="true"
      :close-on-press-escape="false"
      :before-close="beforeCloseDrawer"
      :wrapperClosable="false"
    >
      <!--      @open="handleDrawerOpen"-->
      <div style="margin-left: 20px">
        <div style="height: 82vh; overflow-y: auto">
          <div>
            <el-switch
              v-model="value1"
              style="margin-bottom: 10px;"
              active-text="创建新实例"
              inactive-text="选择已有实例"
              @change="resetSelection"
              :disabled="hasConfirmed">
            </el-switch>
          </div>
          <div v-show="value1">
            <el-form
              :model="gvYamlCloudDeploy"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-row type="flex" justify="space-around">
                <el-col :span="10">
                  <el-form-item label="部署名称" prop="yamlDeployName">
                    <el-input
                      v-model="gvYamlCloudDeploy.yamlDeployName"
                      style="width: 300px"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="名称" prop="yamlName">
                    <el-input
                      v-model="gvYamlCloudDeploy.yamlName"
                      style="width: 300px"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row type="flex" justify="space-around">
                <el-col :span="10">
                  <el-form-item label="版本" prop="yamlVersion">
                    <el-input
                      v-model="gvYamlCloudDeploy.yamlVersion"
                      style="width: 300px"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="命名空间" prop="namespace">
                    <el-input
                      v-model="namespace"
                      style="width: 300px"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row type="flex" justify="space-around">
                <el-col :span="10">
                  <el-form-item label="镜像名称" prop="yamlImages">
                    <el-input
                      v-model="gvYamlCloudDeploy.yamlImages"
                      style="width: 300px"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="描述" prop="yamlDescription">
                    <el-input
                      type="textarea"
                      v-model="gvYamlCloudDeploy.yamlDescription"
                      style="width: 300px"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item>
                <div style="height: 50vh; overflow-y: scroll">
                  <codemirror v-model="gvYamlCloudDeploy.yamlContent" :options="cmOptions"/>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div v-show="!value1">
            <div>
              <el-table
                :data="yamlCloudList"
                style="width: 100%; height: 38vh;"
                @row-click="tableSelectionChange"
              >
                <el-table-column
                  align="center"
                  width="35"
                >
                  <template slot-scope="scope">
                    <el-radio class="radio" v-model="currentSelectedId" :label="scope.row.id">&nbsp;</el-radio>
                  </template>
                </el-table-column>
                <el-table-column prop="yamlName" label="服务名称" width="170">
                </el-table-column>
                <el-table-column label="部署名称" width="200">
                  <template slot-scope="scope">
                    <el-tooltip
                      effect="dark"
                      :content="scope.row.yamlDeployName"
                      placement="bottom-start"
                      popper-class="tooltipClass"
                      :disabled="isShowTooltip"
                    >
                      <div class="descSpan" @mouseover="onMouseOver($event)">
                        {{ scope.row.yamlDeployName }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column prop="yamlVersion" label="服务版本" width="200">
                </el-table-column>
                <!--                <el-table-column-->
                <!--                  prop="yamlDeployType"-->
                <!--                  label="部署类型"-->
                <!--                  width="170"-->
                <!--                ></el-table-column>-->
                <el-table-column label="服务描述">
                  <template slot-scope="scope">
                    <el-tooltip
                      effect="dark"
                      :content="scope.row.yamlDescription"
                      placement="bottom-start"
                      popper-class="tooltipClass"
                      :disabled="isShowTooltip"
                    >
                      <div class="descSpan" @mouseover="onMouseOver($event)">
                        {{ scope.row.yamlDescription }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column prop="updateTime" label="创建时间" width="170">
                </el-table-column>
              </el-table>
            </div>
            <div v-show="outServiceList.length > 0">
              <el-table
                :data="outServiceList"
                style="width: 100%; height: 38vh;"
                @row-click="tableSelectionOutChange"
              >
                <el-table-column
                  align="center"
                  width="35"
                >
                  <template slot-scope="scope">
                    <el-radio class="radio" v-model="currentSelectedId" :label="scope.row.serviceId">&nbsp;</el-radio>
                  </template>
                </el-table-column>
                <el-table-column prop="serviceZhname" label="服务名称" width="170">
                </el-table-column>
                <el-table-column
                  prop="serviceName"
                  label="服务标识"
                  width="200"
                />
                <el-table-column
                  prop="serviceIp"
                  label="服务地址"
                  width="200"
                />
                <el-table-column label="描述">
                  <template slot-scope="scope">
                    <el-tooltip
                      effect="dark"
                      :content="scope.row.serviceDescription"
                      placement="bottom-start"
                      popper-class="tooltipClass"
                      :disabled="isShowTooltip"
                    >
                      <div
                        class="descSpan"
                        style="text-align: left"
                        @mouseover="onMouseOver($event)"
                      >
                        {{ scope.row.serviceDescription }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column prop="updateTime" label="创建时间" width="190"/>
              </el-table>
            </div>
          </div>
        </div>
        <div
          style="float: right; margin-right: 70px"
        >
          <el-button
            type="primary"
            @click="saveYamlInfoByYaml"
            class="el-button-primary-style"
          >确 定
          </el-button>
          <el-button
            @click="beforeCloseDrawer"
            type="primary"
            class="el-button-primary-style"
          >取 消
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import {getTenantId} from "@/utils/tenantId";
  import {codemirror} from "vue-codemirror";
  import "codemirror/lib/codemirror.css";
  import "codemirror/mode/yaml/yaml.js";

  export default {
    name: "ServiceGroupDeployDrawer",
    props: ["selectYamlId", "selectYamlAppName", "selectYamlInterface"],
    components: {
      codemirror,
    },
    data() {
      return {
        value1: true,
        configVisible: false,
        hasConfirmed: false,
        gvYamlCloudDeploy: {
          yamlDeployName: "",
          // id: "",
          yamlZhname: "",
          yamlName: "",
          yamlVersion: "",
          yamlInterface: "",
          yamlDescription: "",
          yamlImages: "",
          yamlContent: "",
        },
        namespace: "",
        detailType: "",
        cmOptions: {
          mode: "yaml", // 使用YAML模式
          theme: "default", // 使用默认主题
          lineNumbers: true, // 显示行号
          line: true, // 显示行高亮
          styleActiveLine: true, // 高亮当前行
          matchBrackets: true, // 括号匹配高亮
          autoCloseBrackets: true, // 自动闭合括号
          gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], // 显示行号和折叠标记
          foldGutter: true, // 启用折叠功能
        },
        rules: {
          yamlDeployName: [
            {required: true, message: "请输入名称", trigger: "blur"},
            {
              min: 3,
              message: "请输入至少三位",
              trigger: "blur",
            },
            {
              min: 3,
              max: 20,
              message: "输入名称过长",
              trigger: "blur",
            },
            {
              pattern: /^[a-zA-Z]([a-zA-Z0-9])*$/,
              message: "只包含字母、数字，且以字母开头",
              trigger: ["blur", "change"],
            },
          ],
        },
        yamlCloudList: [],
        outServiceList: [],
        currentSelectedId: null,
        isShowTooltip: false,
        checkList: {}
      };
    },
    methods: {
      onMouseOver(event) {
        const ev = event.target;
        const evWeight = ev.scrollWidth;
        const contentWidth = ev.clientWidth;
        if (evWeight > contentWidth) {
          this.isShowTooltip = false;
        } else {
          this.isShowTooltip = true;
        }
      },
      tableSelectionChange(row) {
        this.currentSelectedId = row.id
        this.detailType = "cloudNativeInstance"
        this.checkList = row
      },
      tableSelectionOutChange(row) {
        this.currentSelectedId = row.serviceId
        this.detailType = "outService"
        this.checkList = row
      },
      getYamlInfoById(selectId) {
        this.$appStoreApi.getCloudYamlInfo(selectId).then((res) => {
          if (res && res.code === 200) {
            // this.gvYamlCloudDeploy.id = res.data.id;
            this.gvYamlCloudDeploy.yamlImages = res.data.yamlImages;
            this.gvYamlCloudDeploy.yamlDescription = res.data.yamlDescription;
            this.gvYamlCloudDeploy.yamlContent = res.data.yamlContent;
            this.gvYamlCloudDeploy.yamlInterface = res.data.yamlInterface;
            this.gvYamlCloudDeploy.yamlZhname = res.data.yamlZhname;
            this.gvYamlCloudDeploy.yamlName = res.data.yamlName;
            this.gvYamlCloudDeploy.yamlVersion = res.data.yamlVersion;
          }
          this.$tenantManageApi.getTenantNameById(getTenantId()).then((response) => {
            this.namespace = response.data;
          })
        });
      },
      saveYamlInfoByYaml() {
        console.log(this.value1);
        if (this.value1) {
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              // deploy 逻辑
              this.$emit("addServiceGroupOneServiceByYaml", this.gvYamlCloudDeploy);
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        } else {
          this.saveInstanceInfo();
        }
      },
      saveInstanceInfo() {
        let tmp = {
          infoType: '',
          deployId: '',
          appName: '',
          appVersion: '',
        };
        if (this.detailType === "cloudNativeInstance") {
          tmp.infoType = "cloudNativeInstance";
          tmp.deployId = this.checkList.id;
          tmp.appName = this.checkList.yamlName;
          tmp.appVersion = this.checkList.yamlVersion;
        } else if (this.detailType === "outService") {
          tmp.infoType = "outService";
          tmp.appName = this.checkList.serviceName;
          tmp.deployId = this.checkList.serviceId;
          tmp.appVersion = "";
        }
        this.$emit("addServiceGroupInstanceByYaml", tmp, "");
      },
      getAllYamlCloudInstance(selectYamlName) {
        setTimeout(() => {
          // this.tmpPage.tenantId = getTenantId();
          // if (this.tmpPage.tenantId === undefined) {
          //   this.$router.push("/");
          //   this.$message.warning("数据出现问题，请稍后再试");
          // } else {
          this.$appManageApi.getYamlList(selectYamlName).then((res) => {
            if (res && res.code === 200) {
              this.yamlCloudList = res.data;
            }
          });
          // }
        }, 500);
      },
      getAllOutServiceList(name) {
        this.$appStoreApi.getOutServiceByName(name).then((res) => {
          if (res && res.code === 200) {
            this.outServiceList = res.data;
          }
        }).catch((error) => {
          this.$message.error(error.message);
        });
      },
      resetSelection(status) {
        this.detailType = ""
        if (status) {
          if (this.gvYamlCloudDeploy.yamlDeployName === "") {
            this.getYamlInfoById(this.selectYamlId);
          }
        } else {
          this.fetchGetData(this.selectYamlId, this.selectYamlAppName, this.selectYamlInterface);
        }
      },
      async fetchGetData(selectYamlId, selectYamlAppName, selectYamlInterface) {
        await this.getAllYamlCloudInstance(selectYamlAppName);
        await this.getAllOutServiceList(selectYamlInterface);
      },
      beforeCloseDrawer() {
        // if (!this.hasConfirmed) {
        //   this.resetSelection()
        // }
        this.gvYamlCloudDeploy = {
          yamlDeployName: "",
          id: "",
          yamlZhname: "",
          yamlName: "",
          yamlVersion: "",
          yamlInterface: "",
          yamlDescription: "",
          yamlImages: "",
          yamlContent: "",
          newVersion: ""
        };
        this.currentSelectedId = "";
        this.detailType = ""
        this.checkList = {};
        this.configVisible = false;
      },
    },
    mounted() {
      setTimeout(() => {
      }, 500);
    },
  };
</script>

<style scoped>
</style>
